<template>
  <Modal
    v-model="visiable"
    title="详情"
    width='900px'
    footer-hide
    @on-cancel="handleCancel"
  >
    <div class="baseInfo">基础信息</div>
    <Table :columns="baseInfoClumns" :data="baseInfoList" />
    <div class="userTable">用户列表</div>
    <Table :loading="userTableLoading" :columns="userTableClumns" :data="getUserData.items" />
    <div class="clear">
      <Page
        class="pageNation"
        :total="getUserData.total"
        :current="getUserData.page"
        :page-size="getUserData.size"
        show-elevator
        show-total
        @on-change="(pageNo) => pageNation(pageNo)">
      </Page>
    </div>
  </Modal>
</template>

<script>
import { queryOrgInfo } from '@/api/organization.js'
import { queryUrseListData } from '@/api/user-manage.js'

export default {
  name: 'DetailModal',
  data () {
    return {
      visiable: false,
      userTableLoading: false,
      orgCode: '',
      userTableClumns: [],
      baseInfoClumns: [],
      baseInfoList: [],
      getUserData: {
        items: []
      }
    }
  },
  methods: {
    showModal (code) {
      this.visiable = true
      this.orgCode = code
      this.getBaseInfo(code)
      this.queryTableData({page: 1, orgCode: code})
    },
    handleCancel () {
      this.visiable = false
    },
    getBaseInfo (code) {
      queryOrgInfo(code).then(response => {
        const { data } = response
        if (data.code === 2000) {
          this.baseInfoList = [data.data]
        } else {
          this.$Message.error(data.msg || '系统错误，请稍后再试')
        }
      })
    },
    pageNation (pageNo) {
      const orgCode = this.orgCode
      this.queryTableData({orgCode, page: pageNo})
    },
    queryTableData ({page = 1, size = 5}) {
      this.userTableLoading = true
      queryUrseListData({page, size}).then((response) => {
        const { data } = response
        if (data.code === 2000) {
          this.getUserData = data.data
        } else {
          this.$Message.error(data.msg || '系统错误，请稍后再试')
        }
        this.userTableLoading = false
      })
    },
    setBaseInfoClumn () {
      this.baseInfoClumns = [
        {
          key: 'simpleName',
          title: '名称'
        }, {
          key: 'level',
          title: '架构级别'
        }, {
          key: 'charge',
          title: '负责人'
        }, {
          key: 'createUserName',
          title: '创建人'
        }, {
          key: 'createTime',
          title: '创建时间'
        }, {
          key: 'description',
          title: '备注'
        }
      ]
    },
    setUserTableClumn () {
      this.userTableClumns = [
        {
          key: 'userName',
          title: '姓名'
        }, {
          key: 'account',
          title: '账号'
        }, {
          key: 'deptName',
          title: '部门'
        }, {
          key: 'roleInfo',
          title: '角色',
          render: (h, { row }) => {
            return <span>{row.roleInfo.map(item => item.roleName).join('、')}</span>
          }
        }, {
          key: 'phone',
          title: '手机号'
        }, {
          key: 'email',
          title: '邮箱'
        }, {
          key: 'description',
          title: '备注'
        }
      ]
    }
  },
  mounted () {
    this.setBaseInfoClumn()
    this.setUserTableClumn()
    // this.getUserTableData()
  }
}
</script>
<style scoped>
  .baseInfo,.userTable {
    margin-bottom: 15px;
    font-weight: bold;
  }
  .userTable {
    margin-top: 15px;
  }
  .pageNation {
    float: right;
    margin-top: 20px;
  }
</style>
